<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/imagebitmap-and-animations.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=system-state.html>← 8.9 System state and capabilities</a> — <a href=index.html>Table of Contents</a> — <a href=comms.html>9 Communication →</a></nav><ol class=toc><li><ol><li><a href=imagebitmap-and-animations.html#images-2><span class=secno>8.10</span> Images</a><ol><li><a href=imagebitmap-and-animations.html#the-imagedata-interface><span class=secno>8.10.1</span> The <code>ImageData</code> interface</a><li><a href=imagebitmap-and-animations.html#the-imagebitmap-interface><span class=secno>8.10.2</span> The <code>ImageBitmap</code> interface</a></ol><li><a href=imagebitmap-and-animations.html#animation-frames><span class=secno>8.11</span> Animation frames</a></ol></ol><h3 id=images-2><span class=secno>8.10</span> Images<a href=#images-2 class=self-link></a></h3>

  <h4 id=the-imagedata-interface><span class=secno>8.10.1</span> The <code>ImageData</code> interface<a href=#the-imagedata-interface class=self-link></a></h4>



  <p>An <code>ImageData</code> object <dfn id=concept-imagedata-bitmap-representation>
  represents a rectanglar bitmap</dfn> with width equal to the <code id=the-imagedata-interface:dom-imagedata-width-2><a href=#dom-imagedata-width-2>
  width</a></code> attribute and height equal to the <code id=the-imagedata-interface:dom-imagedata-height-2><a href=#dom-imagedata-height-2>height</a></code>
  attribute. The pixel values of this bitmap are stored in the <code id=the-imagedata-interface:dom-imagedata-data-2><a href=#dom-imagedata-data-2>
  data</a></code> attribute in left-to-right order, row by row from top to bottom, starting with 0 for
  the top left pixel, with the order and numerical representation of the color components of each
  pixel determined by the <code id=the-imagedata-interface:dom-imagedata-pixelformat><a href=#dom-imagedata-pixelformat>pixelFormat</a></code> attribute.
  The color space of the pixel values of the bitmap is determined by the <code id=the-imagedata-interface:dom-imagedata-colorspace-2><a href=#dom-imagedata-colorspace-2>colorSpace</a></code> attribute.</p>


  <dl class=domintro><dt><code><var>imageData</var> = new <a href=#dom-imagedata-2 id=dom-imagedata>ImageData</a>(<var>sw</var>, <var>sh</var> [, <var>settings</var>])</code><dd>
    <p>Returns an <code>ImageData</code> object with the given dimensions and the color space
    indicated by <var>settings</var>. All the pixels in the returned object are <a id=the-imagedata-interface:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent
    black</a>.</p>

    <p>Throws an <a id=the-imagedata-interface:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-imagedata-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if either of
    the width or height arguments are zero.</p>
   <dt><code><var>imageData</var> = new <a href=#dom-imagedata-with-data-2 id=dom-imagedata-with-data>ImageData</a>(<var>data</var>, <var>sw</var> [, <var>sh</var> [, <var>settings</var> ] ])</code><dd>
    <p>Returns an <code>ImageData</code> object using the data provided in the <code>ImageDataArray</code>
    argument, interpreted using the given dimensions and the color space indicated by <var>settings</var>.</p>

    <p>The byte length of the data needs to be a multiple of the number of bytes per pixel times the
    given width. If the height is provided as well, then the length needs to be exactly the number of
    bytes per pixel times the width times the height.</p>

    <p>Throws an <a id=the-imagedata-interface:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-imagedata-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the given
    data and dimensions can't be interpreted consistently, or if either dimension is zero.</p>
   <dt><code><var>imageData</var>.<a href=#dom-imagedata-width-2 id=dom-imagedata-width>width</a></code><dt><code><var>imageData</var>.<a href=#dom-imagedata-height-2 id=dom-imagedata-height>height</a></code><dd><p>Returns the actual dimensions of the data in the <code>ImageData</code> object, in
   pixels.<dt><code><var>imageData</var>.<a href=#dom-imagedata-data-2 id=dom-imagedata-data>data</a></code><dd><p>Returns the one-dimensional array containing the data in RGBA order, as integers in the
   range 0 to 255.<dt><code><var>imageData</var>.<a href=#dom-imagedata-colorspace-2 id=dom-imagedata-colorspace>colorSpace</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ImageData/colorSpace title="The read-only ImageData.colorSpace property is a string indicating the color space of the image data.">ImageData/colorSpace</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span>15.2+</span></span><span class="chrome yes"><span>Chrome</span><span>92+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>92+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the color space of the pixels.</dl>

  <p>The <dfn data-dfn-for=ImageData id=dom-imagedata-2 data-dfn-type=constructor><code>new ImageData(<var>sw</var>,
  <var>sh</var>, <var>settings</var>)</code></dfn> constructor steps are:</p>

  <ol><li><p>If one or both of <var>sw</var> and <var>sh</var> are zero, then throw an
   <a id=the-imagedata-interface:indexsizeerror-3 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-imagedata-interface:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p><a href=#initialize-an-imagedata-object id=the-imagedata-interface:initialize-an-imagedata-object>Initialize</a> <a id=the-imagedata-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> given
   <var>sw</var>, <var>sh</var>, and <var>settings</var>.<li><p>Initialize the image data of <a id=the-imagedata-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> to <a id=the-imagedata-interface:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.</ol>

  <p>The <dfn data-dfn-for=ImageData id=dom-imagedata-with-data-2 data-dfn-type=constructor><code>new
  ImageData(<var>data</var>, <var>sw</var>, <var>sh</var>, <var>settings</var>)</code></dfn>
  constructor steps are:</p>

  <ol><li><p>Let <var>bytesPerPixel</var> be 4 if
   <var>settings</var>["<code id=the-imagedata-interface:dom-imagedatasettings-pixelformat><a href=#dom-imagedatasettings-pixelformat>pixelFormat</a></code>"] is
   "<a href=#dom-imagedatapixelformat-rgba-unorm8 id=the-imagedata-interface:dom-imagedatapixelformat-rgba-unorm8>rgba-unorm8</a>"; otherwise 8.<li><p>Let <var>length</var> be the <a id=the-imagedata-interface:buffer-source-byte-length href=https://webidl.spec.whatwg.org/#buffersource-byte-length data-x-internal=buffer-source-byte-length>buffer source byte length</a> of <var>data</var>.<li><p>If <var>length</var> is not a nonzero integral multiple of <var>bytesPerPixel</var>, then throw an
   <a id=the-imagedata-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-imagedata-interface:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>length</var> be <var>length</var> divided by <var>bytesPerPixel</var>.</p>

   <li>
    <p>If <var>length</var> is not an integral multiple of <var>sw</var>, then throw an
    <a id=the-imagedata-interface:indexsizeerror-4 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-imagedata-interface:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

    <p class=note>At this step, the length is guaranteed to be greater than zero (otherwise the
    second step above would have aborted the steps), so if <var>sw</var> is zero, this
    step will throw the exception and return.</p>
   <li><p>Let <var>height</var> be <var>length</var> divided by <var>sw</var>.<li><p>If <var>sh</var> was given and its value is not equal to <var>height</var>, then throw an
   <a id=the-imagedata-interface:indexsizeerror-5 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=the-imagedata-interface:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p><a href=#initialize-an-imagedata-object id=the-imagedata-interface:initialize-an-imagedata-object-2>Initialize</a> <a id=the-imagedata-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> given
    <var>sw</var>, <var>sh</var>, <var>settings</var>, and
    <i><a href=#initialize-imagedata-source id=the-imagedata-interface:initialize-imagedata-source>source</a></i> set to <var>data</var>.</p>

    <p class=note>This step does not set <a id=the-imagedata-interface:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s data to a copy of <var>data</var>.
    It sets it to the actual <code>ImageDataArray</code> object passed as <var>data</var>.</p>
   </ol>


  <p>To <dfn id=initialize-an-imagedata-object>initialize an <code>ImageData</code> object</dfn> <var>imageData</var>, given a
  positive integer number of pixels per row <var>pixelsPerRow</var>, a positive integer number
  of rows <var>rows</var>, an <code>ImageDataSettings</code> <var>settings</var>, an optional
  <code>ImageDataArray</code> <dfn id=initialize-imagedata-source><var>source</var></dfn>,
  and an optional <code>PredefinedColorSpace</code> <dfn id=initialize-imagedata-defaultcolorspace><var>defaultColorSpace</var></dfn>:</p>

  <ol><li>
    <p>If <var>source</var> was given:</p>

    <ol><li><p>If <var>settings</var>["<code id=the-imagedata-interface:dom-imagedatasettings-pixelformat-2><a href=#dom-imagedatasettings-pixelformat>pixelFormat</a></code>"]
     equals "<a href=#dom-imagedatapixelformat-rgba-unorm8 id=the-imagedata-interface:dom-imagedatapixelformat-rgba-unorm8-2>rgba-unorm8</a>" and
     <var>source</var> is not a <code id=the-imagedata-interface:idl-uint8clampedarray><a data-x-internal=idl-uint8clampedarray href=https://webidl.spec.whatwg.org/#idl-Uint8ClampedArray>Uint8ClampedArray</a></code>,
     then throw an <a id=the-imagedata-interface:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-imagedata-interface:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>settings</var>["<code id=the-imagedata-interface:dom-imagedatasettings-pixelformat-3><a href=#dom-imagedatasettings-pixelformat>pixelFormat</a></code>"]
     is "<a href=#dom-imagedatapixelformat-rgba-float16 id=the-imagedata-interface:dom-imagedatapixelformat-rgba-float16>rgba-float16</a>" and
     <var>source</var> is not a <code id=the-imagedata-interface:idl-float16array><a data-x-internal=idl-float16array href=https://webidl.spec.whatwg.org/#idl-Float16Array>Float16Array</a></code>,
     then throw an <a id=the-imagedata-interface:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-imagedata-interface:domexception-8><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Initialize the <dfn data-dfn-for=ImageData id=dom-imagedata-data-2 data-dfn-type=attribute><code>data</code></dfn> attribute of <var>imageData</var> to
     <var>source</var>.</ol>
   <li>
    <p>Otherwise (<var>source</var> was not given):</p>

    <ol><li><p>If <var>settings</var>["<code id=the-imagedata-interface:dom-imagedatasettings-pixelformat-4><a href=#dom-imagedatasettings-pixelformat>pixelFormat</a></code>"] is "<a href=#dom-imagedatapixelformat-rgba-unorm8 id=the-imagedata-interface:dom-imagedatapixelformat-rgba-unorm8-3>rgba-unorm8</a>", then initialize the <code id=the-imagedata-interface:dom-imagedata-data-2-2><a href=#dom-imagedata-data-2>data</a></code> attribute of <var>imageData</var> to a new <code id=the-imagedata-interface:idl-uint8clampedarray-2><a data-x-internal=idl-uint8clampedarray href=https://webidl.spec.whatwg.org/#idl-Uint8ClampedArray>Uint8ClampedArray</a></code> object. The <code id=the-imagedata-interface:idl-uint8clampedarray-3><a data-x-internal=idl-uint8clampedarray href=https://webidl.spec.whatwg.org/#idl-Uint8ClampedArray>Uint8ClampedArray</a></code> object must use a new
     <code id=the-imagedata-interface:idl-arraybuffer><a data-x-internal=idl-arraybuffer href=https://webidl.spec.whatwg.org/#idl-ArrayBuffer>ArrayBuffer</a></code> for its storage, and must have
     a zero byte offset and byte length equal to the length of its storage, in bytes.
     The storage <code id=the-imagedata-interface:idl-arraybuffer-2><a data-x-internal=idl-arraybuffer href=https://webidl.spec.whatwg.org/#idl-ArrayBuffer>ArrayBuffer</a></code> must have a length
     of 4 × <var>rows</var> × <var>pixelsPerRow</var> bytes.<li><p>Otherwise, if <var>settings</var>["<code id=the-imagedata-interface:dom-imagedatasettings-pixelformat-5><a href=#dom-imagedatasettings-pixelformat>pixelFormat</a></code>"] is "<a href=#dom-imagedatapixelformat-rgba-unorm8 id=the-imagedata-interface:dom-imagedatapixelformat-rgba-unorm8-4>rgba-float16</a>", then initialize the <code id=the-imagedata-interface:dom-imagedata-data-2-3><a href=#dom-imagedata-data-2>data</a></code> attribute of <var>imageData</var> to a new <code id=the-imagedata-interface:idl-float16array-2><a data-x-internal=idl-float16array href=https://webidl.spec.whatwg.org/#idl-Float16Array>Float16Array</a></code> object. The <code id=the-imagedata-interface:idl-float16array-3><a data-x-internal=idl-float16array href=https://webidl.spec.whatwg.org/#idl-Float16Array>Float16Array</a></code> object must use a new
     <code id=the-imagedata-interface:idl-arraybuffer-3><a data-x-internal=idl-arraybuffer href=https://webidl.spec.whatwg.org/#idl-ArrayBuffer>ArrayBuffer</a></code> for its storage, and must have
     a zero byte offset and byte length equal to the length of its storage, in bytes.
     The storage <code id=the-imagedata-interface:idl-arraybuffer-4><a data-x-internal=idl-arraybuffer href=https://webidl.spec.whatwg.org/#idl-ArrayBuffer>ArrayBuffer</a></code> must have a length
     of 8 × <var>rows</var> × <var>pixelsPerRow</var> bytes.<li><p>If the storage <code id=the-imagedata-interface:idl-arraybuffer-5><a data-x-internal=idl-arraybuffer href=https://webidl.spec.whatwg.org/#idl-ArrayBuffer>ArrayBuffer</a></code> could not be
     allocated, then rethrow the <code id=the-imagedata-interface:js-rangeerror><a data-x-internal=js-rangeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror>RangeError</a></code> thrown by JavaScript,
     and return.</ol>
   <li><p>Initialize the <dfn data-dfn-for=ImageData id=dom-imagedata-width-2 data-dfn-type=attribute><code>width</code></dfn> attribute of <var>imageData</var> to
   <var>pixelsPerRow</var>.<li><p>Initialize the <dfn data-dfn-for=ImageData id=dom-imagedata-height-2 data-dfn-type=attribute><code>height</code></dfn> attribute of <var>imageData</var> to
   <var>rows</var>.<li><p>Initialize the
   <dfn data-dfn-for=ImageData id=dom-imagedata-pixelformat data-dfn-type=attribute><code>pixelFormat</code></dfn>
   attribute of <var>imageData</var> to
   <var>settings</var>["<dfn data-dfn-for=ImageDataSettings id=dom-imagedatasettings-pixelformat data-dfn-type=dict-member><code>pixelFormat</code></dfn>"].<li><p>If <var>settings</var>["<code id=the-imagedata-interface:dom-imagedatasettings-colorspace><a href=#dom-imagedatasettings-colorspace>colorSpace</a></code>"]
   <a href=https://infra.spec.whatwg.org/#map-exists id=the-imagedata-interface:map-exists data-x-internal=map-exists>exists</a>, then initialize the <dfn data-dfn-for=ImageData id=dom-imagedata-colorspace-2 data-dfn-type=attribute><code>colorSpace</code></dfn> attribute of <var>imageData</var> to
   <var>settings</var>["<dfn data-dfn-for=ImageDataSettings id=dom-imagedatasettings-colorspace data-dfn-type=dict-member><code>colorSpace</code></dfn>"].<li><p>Otherwise, if <var>defaultColorSpace</var> was given, then initialize the <code id=the-imagedata-interface:dom-imagedata-colorspace-2-2><a href=#dom-imagedata-colorspace-2>colorSpace</a></code> attribute of <var>imageData</var> to
   <var>defaultColorSpace</var>.<li><p>Otherwise, initialize the <code id=the-imagedata-interface:dom-imagedata-colorspace-2-3><a href=#dom-imagedata-colorspace-2>colorSpace</a></code>
   attribute of <var>imageData</var> to "<a href=canvas.html#dom-predefinedcolorspace-srgb id=the-imagedata-interface:dom-predefinedcolorspace-srgb>srgb</a>".</ol>

  <p><code>ImageData</code> objects are <a id=the-imagedata-interface:serializable-objects href=structured-data.html#serializable-objects>serializable objects</a>. Their <span>serialization
  steps</span>, given <var>value</var> and <var>serialized</var>, are:</p>

  <ol><li><p>Set <var>serialized</var>.[[Data]] to the <span>sub-serialization</span> of the value of
   <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-data-2-4><a href=#dom-imagedata-data-2>data</a></code> attribute.<li><p>Set <var>serialized</var>.[[Width]] to the value of <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-width-2-2><a href=#dom-imagedata-width-2>width</a></code> attribute.<li><p>Set <var>serialized</var>.[[Height]] to the value of <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-height-2-2><a href=#dom-imagedata-height-2>height</a></code> attribute.<li><p>Set <var>serialized</var>.[[ColorSpace]] to the value of <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-colorspace-2-4><a href=#dom-imagedata-colorspace-2>colorSpace</a></code> attribute.<li><p>Set <var>serialized</var>.[[PixelFormat]] to the value of <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-pixelformat-2><a href=#dom-imagedata-pixelformat>pixelFormat</a></code> attribute.</ol>

  <p>Their <span>deserialization steps</span>, given <var>serialized</var>, <var>value</var>,
  and <var>targetRealm</var>, are:</p>

  <ol><li><p>Initialize <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-data-2-5><a href=#dom-imagedata-data-2>data</a></code> attribute
   to the <span>sub-deserialization</span> of <var>serialized</var>.[[Data]].<li><p>Initialize <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-width-2-3><a href=#dom-imagedata-width-2>width</a></code> attribute
   to <var>serialized</var>.[[Width]].<li><p>Initialize <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-height-2-3><a href=#dom-imagedata-height-2>height</a></code> attribute
   to <var>serialized</var>.[[Height]].<li><p>Initialize <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-colorspace-2-5><a href=#dom-imagedata-colorspace-2>colorSpace</a></code>
   attribute to <var>serialized</var>.[[ColorSpace]].<li><p>Initialize <var>value</var>'s <code id=the-imagedata-interface:dom-imagedata-pixelformat-3><a href=#dom-imagedata-pixelformat>pixelFormat</a></code>
   attribute to <var>serialized</var>.[[PixelFormat]].</ol>

  <p>The <code>ImageDataPixelFormat</code> enumeration is used to specify type of the
  <code id=the-imagedata-interface:dom-imagedata-data-2-6><a href=#dom-imagedata-data-2>data</a></code> attribute of an <code>ImageData</code>
  and the arrangement and numerical representation of the color components for each pixel.</p>

  <p>The "<dfn data-dfn-for=ImageDataPixelFormat id=dom-imagedatapixelformat-rgba-unorm8 data-dfn-type=enum-value><code>rgba-unorm8</code></dfn>" value indicates that the
  <code id=the-imagedata-interface:dom-imagedata-data-2-7><a href=#dom-imagedata-data-2>data</a></code> attribute of an <code>ImageData</code> must be of
  type <a href=https://webidl.spec.whatwg.org/#idl-Uint8ClampedArray id=the-imagedata-interface:idl-uint8clampedarray-4 data-x-internal=idl-uint8clampedarray>Uint8ClampedArray</a>. The color components of each
  pixel must be stored in four sequential elements in the order of red, green, blue, and then alpha.
  Each element represents the 8-bit unsigned normalized value for that component.</p>

  <p>The "<dfn data-dfn-for=ImageDataPixelFormat id=dom-imagedatapixelformat-rgba-float16 data-dfn-type=enum-value><code>rgba-float16</code></dfn>" value indicates that the
  <code id=the-imagedata-interface:dom-imagedata-data-2-8><a href=#dom-imagedata-data-2>data</a></code> attribute of an <code>ImageData</code> must be of
  type <a href=https://webidl.spec.whatwg.org/#idl-Float16Array id=the-imagedata-interface:idl-float16array-4 data-x-internal=idl-float16array>Float16Array</a>. The color components of each pixel must
  be stored in four sequential elements in the order of red, green, blue, and then alpha. Each
  element represents the value for that component.</p>

  <h4 id=the-imagebitmap-interface><span class=secno>8.10.2</span> The <code>ImageBitmap</code> interface<a href=#the-imagebitmap-interface class=self-link></a></h4>

  

  <p>An <code>ImageBitmap</code> object represents a bitmap image that can be painted to a canvas
  without undue latency.</p>

  <p class=note>The exact judgement of what is undue latency of this is left up to the
  implementer, but in general if making use of the bitmap requires network I/O, or even local disk
  I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or
  system RAM, the latency is probably acceptable.</p>

  <dl class=domintro><dt><code><var>promise</var> = self.<span id=dom-createimagebitmap>createImageBitmap</span>(<var>image</var> [, <var>options</var> ])</code><dt><code><var>promise</var> = self.<a href=#dom-createimagebitmap id=the-imagebitmap-interface:dom-createimagebitmap>createImageBitmap</a>(<var>image</var>, <var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var> [, <var>options</var> ])</code><dd>
    <p>Takes <var>image</var>, which can be an <code id=the-imagebitmap-interface:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element, an <a id=the-imagebitmap-interface:svg-image href=https://svgwg.org/svg2-draft/embedded.html#ImageElement data-x-internal=svg-image>SVG
    <code>image</code></a> element, a <code id=the-imagebitmap-interface:the-video-element><a href=media.html#the-video-element>video</a></code> element, a <code id=the-imagebitmap-interface:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> element,
    a <code id=the-imagebitmap-interface:blob><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object, an <code>ImageData</code> object, or another
    <code>ImageBitmap</code> object, and returns a promise that is resolved when a new
    <code>ImageBitmap</code> is created.</p>

    <p>If no <code>ImageBitmap</code> object can be constructed, for example because the provided
    <var>image</var> data is not actually an image, then the promise is rejected instead.</p>

    <p>If <var>sx</var>, <var>sy</var>, <var>sw</var>, and <var>sh</var> arguments are provided, the
    source image is cropped to the given pixels, with any pixels missing in the original replaced by
    <a id=the-imagebitmap-interface:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>. These coordinates are in the source image's pixel coordinate
    space, <em>not</em> in <a href=https://drafts.csswg.org/css-values/#px id="the-imagebitmap-interface:'px'" data-x-internal="'px'">CSS pixels</a>.</p>

    <p>If <var>options</var> is provided, the <code>ImageBitmap</code> object's bitmap data is
    modified according to <var>options</var>. For example, if the <code>premultiplyAlpha</code> option is set to "<code>premultiply</code>", the <span>bitmap data</span>'s non-alpha color components are
    <a href=canvas.html#concept-premultiplied-alpha id=the-imagebitmap-interface:concept-premultiplied-alpha>premultiplied by the alpha component</a>.</p>

    <p>Rejects the promise with an <a id=the-imagebitmap-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
    <code id=the-imagebitmap-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the source image is not in a valid state (e.g., an <code id=the-imagebitmap-interface:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code>
    element that hasn't loaded successfully, an <code>ImageBitmap</code> object whose
    <span>[[Detached]]</span> internal slot value is true, an <code>ImageData</code> object whose
    <code id=the-imagebitmap-interface:dom-imagedata-data-2><a href=#dom-imagedata-data-2>data</a></code> attribute value's [[ViewedArrayBuffer]] internal
    slot is detached, or a <code id=the-imagebitmap-interface:blob-2><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> whose data cannot be interpreted as a bitmap
    image).</p>

    <p>Rejects the promise with a <a id=the-imagebitmap-interface:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a>
    <code id=the-imagebitmap-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the script is not allowed to access the image data of the source
    image (e.g. a <code id=the-imagebitmap-interface:the-video-element-2><a href=media.html#the-video-element>video</a></code> that is <span>CORS-cross-origin</span>, or a
    <code id=the-imagebitmap-interface:the-canvas-element-2><a href=canvas.html#the-canvas-element>canvas</a></code> being drawn on by a script in a worker from another
    <a id=the-imagebitmap-interface:concept-origin href=browsers.html#concept-origin>origin</a>).</p>
   <dt><code><var>imageBitmap</var>.<span id=dom-imagebitmap-close>close</span>()</code><dd><p>Releases <var>imageBitmap</var>'s underlying <span>bitmap data</span>.<dt><code><var>imageBitmap</var>.<span id=dom-imagebitmap-width>width</span></code><dd>
    <p>Returns the <a id=the-imagebitmap-interface:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> of the image, in <a href=https://drafts.csswg.org/css-values/#px id="the-imagebitmap-interface:'px'-2" data-x-internal="'px'">CSS
    pixels</a>.</p>
   <dt><code><var>imageBitmap</var>.<span id=dom-imagebitmap-height>height</span></code><dd>
    <p>Returns the <a id=the-imagebitmap-interface:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> of the image, in <a href=https://drafts.csswg.org/css-values/#px id="the-imagebitmap-interface:'px'-3" data-x-internal="'px'">CSS
    pixels</a>.</p>
   </dl>

  

  <div class=example>

   <p>Using this API, a sprite sheet can be precut and prepared:</p>

   <pre><code class='js'><c- a>var</c-> sprites <c- o>=</c-> <c- p>{};</c->
<c- a>function</c-> loadMySprites<c- p>()</c-> <c- p>{</c->
  <c- a>var</c-> image <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
  image<c- p>.</c->src <c- o>=</c-> <c- t>&apos;mysprites.png&apos;</c-><c- p>;</c->
  <c- a>var</c-> resolver<c- p>;</c->
  <c- a>var</c-> promise <c- o>=</c-> <c- k>new</c-> Promise<c- p>(</c-><c- a>function</c-> <c- p>(</c->arg<c- p>)</c-> <c- p>{</c-> resolver <c- o>=</c-> arg <c- p>});</c->
  image<c- p>.</c->onload <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
    resolver<c- p>(</c->Promise<c- p>.</c->all<c- p>([</c->
      createImageBitmap<c- p>(</c->image<c- p>,</c->  <c- mf>0</c-><c- p>,</c->  <c- mf>0</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>).</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->image<c- p>)</c-> <c- p>{</c-> sprites<c- p>.</c->person <c- o>=</c-> image <c- p>}),</c->
      createImageBitmap<c- p>(</c->image<c- p>,</c-> <c- mf>40</c-><c- p>,</c->  <c- mf>0</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>).</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->image<c- p>)</c-> <c- p>{</c-> sprites<c- p>.</c->grass  <c- o>=</c-> image <c- p>}),</c->
      createImageBitmap<c- p>(</c->image<c- p>,</c-> <c- mf>80</c-><c- p>,</c->  <c- mf>0</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>).</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->image<c- p>)</c-> <c- p>{</c-> sprites<c- p>.</c->tree   <c- o>=</c-> image <c- p>}),</c->
      createImageBitmap<c- p>(</c->image<c- p>,</c->  <c- mf>0</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>).</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->image<c- p>)</c-> <c- p>{</c-> sprites<c- p>.</c->hut    <c- o>=</c-> image <c- p>}),</c->
      createImageBitmap<c- p>(</c->image<c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>).</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->image<c- p>)</c-> <c- p>{</c-> sprites<c- p>.</c->apple  <c- o>=</c-> image <c- p>}),</c->
      createImageBitmap<c- p>(</c->image<c- p>,</c-> <c- mf>80</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- mf>40</c-><c- p>).</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->image<c- p>)</c-> <c- p>{</c-> sprites<c- p>.</c->snake  <c- o>=</c-> image <c- p>})</c->
    <c- p>]));</c->
  <c- p>};</c->
  <c- k>return</c-> promise<c- p>;</c->
<c- p>}</c->

<c- a>function</c-> runDemo<c- p>()</c-> <c- p>{</c->
  <c- a>var</c-> canvas <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>&apos;canvas#demo&apos;</c-><c- p>);</c->
  <c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->
  context<c- p>.</c->drawImage<c- p>(</c->sprites<c- p>.</c->tree<c- p>,</c-> <c- mf>30</c-><c- p>,</c-> <c- mf>10</c-><c- p>);</c->
  context<c- p>.</c->drawImage<c- p>(</c->sprites<c- p>.</c->snake<c- p>,</c-> <c- mf>70</c-><c- p>,</c-> <c- mf>10</c-><c- p>);</c->
<c- p>}</c->

loadMySprites<c- p>().</c->then<c- p>(</c->runDemo<c- p>);</c-></code></pre>

  </div>



  <h3 id=animation-frames><span class=secno>8.11</span> Animation frames<a href=#animation-frames class=self-link></a></h3>

  <p>Some objects include the <code>AnimationFrameProvider</code> interface mixin.</p>

  

  <p>Each <code>AnimationFrameProvider</code> object also has a <dfn id=concept-animationframeprovider-target-object>target object</dfn> that stores the
  provider's internal state. It is defined as follows:</p>

  <dl><dt>If the <code>AnimationFrameProvider</code> is a <code>Window</code><dd>The <code>Window</code>'s <span>associated
   <code>Document</code></span><dt>If the <code>AnimationFrameProvider</code> is a <code id=animation-frames:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code><dd>The <code id=animation-frames:dedicatedworkerglobalscope-2><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code></dl>

  <p>Each <a href=#concept-animationframeprovider-target-object id=animation-frames:concept-animationframeprovider-target-object>target object</a> has a
  <dfn id=list-of-animation-frame-callbacks>map of animation frame callbacks</dfn>, which is an
  <a id=animation-frames:ordered-map href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> that must be initially empty, and an <dfn id=animation-frame-callback-identifier>animation frame callback
  identifier</dfn>, which is a number that must initially be zero.</p>

  <p>An <code>AnimationFrameProvider</code> <var>provider</var> is considered <dfn id=concept-animationframeprovider-supported>supported</dfn> if any of the following are
  true:</p>

  <ul><li><p><var>provider</var> is a <code>Window</code>.<li><p><var>provider</var>'s <span>owner set</span> <a href=https://infra.spec.whatwg.org/#list-contain id=animation-frames:list-contains data-x-internal=list-contains>contains</a>
   a <code>Document</code> object.<li><p>Any of the <code id=animation-frames:dedicatedworkerglobalscope-3><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code> objects in <var>provider</var>'s
   <span>owner set</span> are <a href=#concept-animationframeprovider-supported id=animation-frames:concept-animationframeprovider-supported>supported</a>.</ul>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame title="The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation right before the next repaint. The method takes a callback as an argument to be invoked before the repaint.">Window/requestAnimationFrame</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>23+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>24+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>23+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=AnimationFrameProvider id=dom-animationframeprovider-requestanimationframe data-dfn-type=method><code>requestAnimationFrame(<var>callback</var>)</code></dfn>
  method steps are:</p>

  <ol><li><p>If <a id=animation-frames:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is not <a href=#concept-animationframeprovider-supported id=animation-frames:concept-animationframeprovider-supported-2>supported</a>, then throw a
   <a id=animation-frames:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=animation-frames:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>target</var> be <a id=animation-frames:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-animationframeprovider-target-object id=animation-frames:concept-animationframeprovider-target-object-2>target object</a>.<li><p>Increment <var>target</var>'s <a href=#animation-frame-callback-identifier id=animation-frames:animation-frame-callback-identifier>animation frame callback identifier</a> by one,
   and let <var>handle</var> be the result.<li><p>Let <var>callbacks</var> be <var>target</var>'s <a href=#list-of-animation-frame-callbacks id=animation-frames:list-of-animation-frame-callbacks>map of animation frame
   callbacks</a>.<li><p><a href=https://infra.spec.whatwg.org/#map-set id=animation-frames:map-set data-x-internal=map-set>Set</a> <var>callbacks</var>[<var>handle</var>] to
   <var>callback</var>.<li><p>Return <var>handle</var>.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame title="The window.cancelAnimationFrame() method cancels an animation frame request previously scheduled through a call to window.requestAnimationFrame().">Window/cancelAnimationFrame</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>23+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>24+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=AnimationFrameProvider id=animationframeprovider-cancelanimationframe data-dfn-type=method><code>cancelAnimationFrame(<var>handle</var>)</code></dfn>
  method steps are:</p>

  <ol><li><p>If <a id=animation-frames:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is not <a href=#concept-animationframeprovider-supported id=animation-frames:concept-animationframeprovider-supported-3>supported</a>, then throw a
   <a id=animation-frames:notsupportederror-2 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=animation-frames:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>callbacks</var> be <a id=animation-frames:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-animationframeprovider-target-object id=animation-frames:concept-animationframeprovider-target-object-3>target object</a>'s <a href=#list-of-animation-frame-callbacks id=animation-frames:list-of-animation-frame-callbacks-2>map of
   animation frame callbacks</a>.<li><p><a href=https://infra.spec.whatwg.org/#map-remove id=animation-frames:map-remove data-x-internal=map-remove>Remove</a> <var>callbacks</var>[<var>handle</var>].</ol>

  <p>To <dfn id=run-the-animation-frame-callbacks>run the animation frame callbacks</dfn> for a <a href=#concept-animationframeprovider-target-object id=animation-frames:concept-animationframeprovider-target-object-4>target object</a> <var>target</var> with
  a timestamp <var>now</var>:</p>

  <ol><li><p>Let <var>callbacks</var> be <var>target</var>'s <a href=#list-of-animation-frame-callbacks id=animation-frames:list-of-animation-frame-callbacks-3>map of animation frame
   callbacks</a>.<li><p>Let <var>callbackHandles</var> be the result of <a href=https://infra.spec.whatwg.org/#map-getting-the-keys id=animation-frames:map-get-the-keys data-x-internal=map-get-the-keys>getting
   the keys</a> of <var>callbacks</var>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=animation-frames:list-iterate data-x-internal=list-iterate>For each</a> <var>handle</var> in
    <var>callbackHandles</var>, if <var>handle</var> <a href=https://infra.spec.whatwg.org/#map-exists id=animation-frames:map-exists data-x-internal=map-exists>exists</a> in
    <var>callbacks</var>:</p>

    <ol><li><p>Let <var>callback</var> be <var>callbacks</var>[<var>handle</var>].<li><p><a href=https://infra.spec.whatwg.org/#map-remove id=animation-frames:map-remove-2 data-x-internal=map-remove>Remove</a>
     <var>callbacks</var>[<var>handle</var>].<li><p><a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=animation-frames:es-invoking-callback-functions data-x-internal=es-invoking-callback-functions>Invoke</a> <var>callback</var> with «
     <var>now</var> » and "<code>report</code>".</ol>
   </ol>

  <div class=example>
   <p>Inside workers, <code id=animation-frames:dom-animationframeprovider-requestanimationframe><a href=#dom-animationframeprovider-requestanimationframe>requestAnimationFrame()</a></code> can be
   used together with an <code>OffscreenCanvas</code> transferred from a <code id=animation-frames:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code>
   element. First, in the document, transfer control to the worker:</p>

   <pre><code class='js'><c- a>const</c-> offscreenCanvas <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;c&quot;</c-><c- p>).</c->transferControlToOffscreen<c- p>();</c->
worker<c- p>.</c->postMessage<c- p>(</c->offscreenCanvas<c- p>,</c-> <c- p>[</c->offscreenCanvas<c- p>]);</c-></code></pre>

   <p>Then, in the worker, the following code will draw a rectangle moving from left to right:</p>

   <pre><code class='js'><c- a>let</c-> ctx<c- p>,</c-> pos <c- o>=</c-> <c- mf>0</c-><c- p>;</c->
<c- a>function</c-> draw<c- p>(</c->dt<c- p>)</c-> <c- p>{</c->
  ctx<c- p>.</c->clearRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>100</c-><c- p>,</c-> <c- mf>100</c-><c- p>);</c->
  ctx<c- p>.</c->fillRect<c- p>(</c->pos<c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>10</c-><c- p>,</c-> <c- mf>10</c-><c- p>);</c->
  pos <c- o>+=</c-> <c- mf>10</c-> <c- o>*</c-> dt<c- p>;</c->
  requestAnimationFrame<c- p>(</c->draw<c- p>);</c->
<c- p>}</c->

self<c- p>.</c->onmessage <c- o>=</c-> <c- a>function</c-><c- p>(</c->ev<c- p>)</c-> <c- p>{</c->
  <c- a>const</c-> transferredCanvas <c- o>=</c-> ev<c- p>.</c->data<c- p>;</c->
  ctx <c- o>=</c-> transferredCanvas<c- p>.</c->getContext<c- p>(</c-><c- u>&quot;2d&quot;</c-><c- p>);</c->
  draw<c- p>();</c->
<c- p>};</c-></code></pre>
  </div>

  <nav><a href=system-state.html>← 8.9 System state and capabilities</a> — <a href=index.html>Table of Contents</a> — <a href=comms.html>9 Communication →</a></nav>
